<style lang="less" scoped>
@import "./main.less";
</style>
<template>
  <div>
      <Row>
            <Col span="24">
                <Card>
                    <p slot="title" style="height: 32px">
                            <Button type="primary" @click="alertAdd" icon="plus-round">新增</Button>
                    </p>
                    <div>
                            <Table :columns="columnsList" :data="tableData" border disabled-hover></Table>
                    </div>
                    <div class="margin-top-15" style="text-align: center">
                            <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
            <p slot="header" style="color:#2d8cf0;">
                <Icon type="information-circled"></Icon>
                <span>{{formItem.id ? '编辑' : '新增'}}规则</span>
            </p>
            <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
                <FormItem label="标题" prop="name">
                        <Input v-model="formItem.name" placeholder="请输入标题"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
                <Button type="primary" @click="submit" :loading="modalSetting.loading">确定</Button>
            </div>
        </Modal>
  </div>
</template>
<script>
const editButton = (vm, h, currentRow, index) => {
  return h(
    "Button",
    {
      props: {
        type: "primary"
      },
      style: {
        margin: "0 5px"
      },
      on: {
        click: () => {
          {
            vm.formItem.id = currentRow.id;
            // vm.formItem.name = currentRow.name;
            // vm.formItem.rule_set = currentRow.rule_set;
            // vm.formItem.title = currentRow.title;
            vm.modalSetting.show = true;
            vm.modalSetting.index = index;
          }
        }
      }
    },
    "编辑"
  );
};
const deleteButton = (vm, h, currentRow, index) => {
  return h(
    "Poptip",
    {
      props: {
        confirm: true,
        title: "您确定要删除这条数据吗? ",
        transfer: true
      },
      on: {
        "on-ok": () => {
          axios.delete(resourse + currentRow.id).then(function(response) {
            currentRow.loading = false;
            if (response.data.code === 200) {
              vm.tableData.splice(index, 1);
              vm.$Message.success(response.data.msg);
            } else {
              if (response.data.code === 403) {
                vm.$store.commit("logout", this);
                vm.$router.push({
                  name: "login"
                });
              } else {
                vm.$Message.error(response.data.msg);
              }
            }
          });
        }
      }
    },
    [
      h(
        "Button",
        {
          style: {
            margin: "0 5px"
          },
          props: {
            type: "error",
            placement: "top",
            loading: currentRow.isDeleting
          }
        },
        "删除"
      )
    ]
  );
};
const resourse = "house/";
export default {
  data() {
    return {
      columnsList: [
        {
          title: "序号",
          type: "index",
          align: "center"
        },
        {
          title: "ID",
          key: "id",
          align: "center"
        },
        {
          title: "标题",
          key: "title",
          align: "center"
        },
        {
          title: "操作",
          align: "center",
          key: "handle",
          width: 175,
          handle: ["edit", "delete"]
        }
      ],
      tableData: [
        {
          id: 1,
          title: "测试"
        },
        {
          id: 2,
          title: "测试2"
        }
      ],
      tableShow: {
        listCount: 0,
        currentPage: 1,
        pageSize: 10
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      formItem: {
        id: 0
      },
      ruleValidate: {}
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.columnsList.forEach(item => {
        if (item.key === "handle") {
          item.render = (h, params) => {
            return h("div", [
              editButton(this, h, this.tableData[params.index], params.index),
              deleteButton(this, h, this.tableData[params.index], params.index)
            ]);
          };
        }
      });
    },
    alertAdd() {
        this.modalSetting.show = true
    },
    changePage(page) {
      this.tableShow.currentPage = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.pageSize = size;
      this.getList();
    },
    doCancel(data) {
      if (!data) {
        this.formItem.id = 0;
        this.$refs["myForm"].resetFields();
        this.modalSetting.loading = false;
        this.modalSetting.index = 0;
      }
    },
    cancel() {
      this.modalSetting.show = false;
    },
    submit() {
      this.$refs["myForm"].validate(validate => {
        if (validate) {
          this.modalSetting.loading = true;
          if (this.formItem.ruleId === 0) {
            axios.post(resourse, this.formItem).then(response => {
              responseHandle(response);
            });
          } else {
            axios
              .put(resourse + this.formItem.ruleId, this.formItem)
              .then(response => {
                responseHandle(response);
              });
          }
          this.getRules();
          this.cancel();
        }
      });
    },
    getList() {
      axios.get(resourse).then(response => {
        responseHandle(response);
      });
    },
    responseHandle(response) {
      let res = response.data;
      if (res.code === 200) {
        this.tableData = res.data.list;
      } else {
        if (res.code === 403) {
          this.$store.commit("logout", this);
          this.$router.push({
            name: "login"
          });
        } else {
          this.$Message.error(res.msg);
        }
      }
    }
  }
};
</script>

